<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Real Estate Builders Free Responsive Website Templates - icon">
    <meta name="author" content="webThemez.com">
    <title>欢迎来到拴马桩</title>
    <link rel="favicon" href="assets/images/favicon.png">
    <link rel="stylesheet" media="screen" href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700">
    <link rel="stylesheet" href="assets/css/bootstrap.min.css">
    <link rel="stylesheet" href="assets/css/font-awesome.min.css">
    <!-- Custom styles for our template -->
    <link rel="stylesheet" href="assets/css/bootstrap-theme.css" media="screen">
    <link rel="stylesheet" href="assets/css/style.css">
    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
	<script src="assets/js/html5shiv.js"></script>
	<script src="assets/js/respond.min.js"></script>
	<![endif]-->
	  <link rel="shortcut icon" href="Imperial/assets/img/logo.php">
    <link href="assets/css/layui.css" rel="stylesheet">
    <script th:src="@{/webjars/layui/2.5.7/layui.js}"></script>
    <script th:src="@{/webjars/jquery/3.6.0/dist/jquery.js}"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>

<body>
<div th:replace="~{commons/commons::topbar(active='projects')}"></div>
    <!-- /.navbar -->

    <header id="head" class="secondary">
        <div class="container">
            <div class="row">
                <div class="col-sm-8">
                    <h1>About us</h1>
                </div>
            </div>
        </div>
    </header>
<div align="center" id="app">
    <div v-bind:hidden=!flag>
        <div>
            <b >您的邮箱</b>
            <div class="layui-input-inline">
                <input type="text" v-bind:placeholder=person.email autocomplete="off" readonly class="layui-input">
            </div>
            <button class="layui-btn" style="background-color: rgb(255, 130, 47)" @click="sendVerificationCode">发送验证码</button>
        </div>
        <br/>
        <div>
            <b >请输入验证码</b>
            <div class="layui-input-inline">
                <input type="text" autocomplete="off" class="layui-input" id="old">
            </div>
            <button class="layui-btn" style="background-color: rgb(255, 130, 47)" @click="submitVerificationCode">提交验证码</button>
        </div>
    </div>

    <div v-bind:hidden=flag>
        <div>
            <b >请输入新的邮箱</b>
            <div class="layui-input-inline">
                <input type="text" autocomplete="off" class="layui-input" id="new">
            </div>
            <button class="layui-btn" style="background-color: rgb(255, 130, 47)" @click="sendNewEmail">发送验证码</button>
        </div>
        <br/>
        <div>
            <b >请输入验证码</b>
            <div class="layui-input-inline">
                <input type="text" autocomplete="off" class="layui-input" id="newCode">
            </div>
            <button class="layui-btn" style="background-color: rgb(255, 130, 47)" @click="submitVerificationEmail">提交</button>
        </div>
    </div>
    </div>
</div>

</body>
</html>
<script>
    let app = new Vue({
        el:'#app',
        data:({
            person:null,
            flag:true,
            time:0,
            time1:0
        }),
        created:function () {
            this.cartView();
        },
        methods:({
            cartView : function (){
                let that =this;
                $.ajax({
                    url:'/showmsg',
                    success:function (res) {
                        that.person=res;
                    }
                })
            },
            submitVerificationCode : function () {
                let that =this;
                let VerificationCode=$("#old").val();
                $.ajax({
                    url:'/submitVerificationCode',
                    data:{
                        "VerificationCode":VerificationCode
                    },
                    success:function (res) {
                        layui.use('layer',function () {
                            if(res=='-1'){
                                layer.msg("验证码已失效");
                            }
                            if (res=="0"){
                                layer.msg("验证码错误");
                            }
                            if (res=="1"){
                               that.flag=false;
                            }
                        })
                    }
                })
            },
            sendVerificationCode : function () {
                let that =this;
                let flagTime=new Date();
                if(flagTime.getTime()-that.time<180000&&that.time!==0){
                    alert("请3分钟后再点击发送验证码");
                    return;
                }
                $.ajax({
                    url: '/sendVerificationCode',
                    data:{
                        "Email":that.person.email
                    },
                    success : function (res) {
                        layui.use('layer',function () {
                            if (res=="1"){
                               let time=new Date();
                               that.time=time.getTime();
                                layer.msg("发送成功");
                            }else {
                                layer.msg("发送失败");
                            }
                        })
                    }
                })
            },
            sendNewEmail:function () {
                let that =this;
                let flagTime=new Date();
                if(flagTime.getTime()-that.time1<180000&&that.time1!==0){
                    alert("请3分钟后再点击发送验证码");
                    return;
                }
                $.ajax({
                    url: '/sendNewEmail',
                    data:{
                        "Email":$('#new').val()
                    },
                    success : function (res) {
                        layui.use('layer',function () {
                            if (res=="1"){
                                let time=new Date();
                                that.time1=time.getTime();
                                layer.msg("发送成功");
                            }else {
                                layer.msg("发送失败");
                            }
                        })
                    }
                })
            },
            submitVerificationEmail:function () {
                let that =this;
                let Email=$("#new").val();
                let VerificationCode=$("#newCode").val();
                $.ajax({
                    url:'/submitVerificationEmail',
                    data:{
                        "VerificationCode":VerificationCode,
                        "Email":Email
                    },
                    success:function (res) {
                        layui.use('layer',function () {
                            if(res=='-1'){
                                layer.msg("验证码已失效");
                            }
                            if (res=="0"){
                                layer.msg("验证码错误");
                            }
                            if (res=="1"){
                                layer.msg("设置成功");
                            }
                        })
                    }
                })
            }
        })
    })
</script>